<template>
	<view class="blind-box-prize">
		<view class="my-prize" v-if="data.jackpotEnableStatus == 1">
			<view class="my-prize-header" :class="{'headerOn':headerIndex == elindex}" v-for="(el,elindex) in headerData" :key="elindex" @click="changeHeader(el,elindex)">
				<view class="h-title">{{el.name}}</view>
				<view class="h-line"></view>
			</view>
		</view>
		<view class="my-prize" v-else>
			<view class="my-prize-header headerOn" style="padding-right: 0;" >
				<view class="h-title">盲盒奖品</view>
				<!-- <view class="h-line"></view> -->
			</view>
		</view>
		<view class="no_info" v-if="dataList.length == 0" style="padding-top: 300rpx;">
			<image src="@/static/null_img.png" mode="widthFix"></image>
			<text>暂无数据</text>
		</view>
		<view class="box-prize-list" v-else>
			<block v-if="headerIndex == 1">
				<view class="box-prize-li" v-for="(item,index) in dataList" :key="index">
					<view class="prize-but-dj ellipseHide" >{{item.prizeName}}</view>
					<view class="li-left">
						<image class="imgBox li-left-bg" :src="item.img" mode=""></image>
					</view>
					<view class="li-right">
						<view class="right-top">
							<view class="title ellipseHide_two">
								{{item.name}}
							</view>
<!-- 							 <view class="probability" >
							 	{{item.amount}}名
							 </view> -->
						</view>
						<view class="right-botton">
							价值{{item.worth}}元，{{item.validity}}
						</view>
						<view class="kf kfBottom"  @click="kfFunc">
							联系客服
						</view>
					</view>
				</view>
				
			</block>
			<block v-else>
				<view class="box-prize-li" v-for="(item,index) in dataList" :key="index">
					<image  class="li-left-dj" :src="ImageList[item.level-1]" mode=""></image>
					<view class="li-left">
						<image class="imgBox li-left-bg" :src="item.img" mode=""></image>
					</view>
					<view class="li-right">
						<view class="right-top">
							<view class="title ellipseHide_two">
								{{item.name}}
							</view>
							 <view class="kf" @click="kfFunc" >
							 	联系客服
							 </view>
						</view>
						<view class="right-botton">
							价值{{item.worth}}元
							<block v-if="item.type==2">(24小时内发送至账户)</block> 
							<block v-else-if="item.type == 1">({{item.validity}})</block> 
						</view>

					</view>
				</view>
			</block>
		</view>
		<view @click="jumpBlindbox" class="but">继续开盲盒</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerData:[
					{id:0,name:'盲盒奖品'},
					{id:1,name:'奖池奖品'},
				],
				ImageList:[
					'/static/blindbox/my-prize-ssr.png',
					'/static/blindbox/my-prize-sr.png',
					'/static/blindbox/my-prize-r.png',
					'/static/blindbox/my-prize-a.png',
					'/static/blindbox/my-prize-b.png',
				],
				headerIndex:0,
				dataList:[
					// {id:1,name:'',status:false},
					// {id:2,name:'',status:false},
					// {id:3,name:'',status:false},
				],
				// more/loading/noMore
				moreStatus:'more',
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				data:{},
				id:'',
				type:'',//盲盒类型
			}
		},
		onLoad(e) {
			this.id = e.id
			this.type = e.type
			this.getMyBoxPrizeList()
			this.getCurrentBoxActivity()
		},
		methods: {
			async getCurrentBoxActivity(){
				var res = await this.$api.getCurrentBoxActivity(this.id)
				this.data = res.result
			},
			jumpBlindbox(){
				window.location.href =  "/pages/pay/blindbox?id=" + this.id + '&type=' + this.type
			},
			initialization(){
				this.pageNum = 1
				this.moreStatus = 'more'
				this.dataList = []
			},
			changeHeader(item,index){
				this.initialization()
				this.headerIndex = index
				if(this.headerIndex == 0){
					this.getMyBoxPrizeList()
				}else{
					this.getMyJackpotPrizeList()
				}
			},
			kfFunc(){
				uni.navigateTo({
					url:'/pages/my/customer-service/customer-service'
				})
			},
			async getMyBoxPrizeList(){
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				try{
					const res = await this.$api.getMyBoxPrizeList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
						this.moreStatus = 'noMore'
					} else {
						this.moreStatus = 'more'
					}
					
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
			},
			async getMyJackpotPrizeList(){
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					boxActivityId: this.id,
				}
				try{
					const res = await this.$api.getMyJackpotPrizeList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					res.result.records = res.result.records.map(el => {
						el.status = false
						return el;
					})
					if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
						this.moreStatus = 'noMore'
					} else {
						this.moreStatus = 'more'
					}
					
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				this.moreShop = 'noMore'
			} else {
				this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				if(this.headerIndex == 0){
					this.getMyBoxPrizeList()
				}else{
					this.getMyJackpotPrizeList()
				}
				
			}
		}
		
	}
</script>

<style scoped>
	page{
		width: 100%;
		height: 100%;
		background: #F6F6F6;
	}
	/* 头部 */
	.my-prize{
		width: 690rpx;
		height: 168rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	    justify-content: center;
		/* align-items: center; */
	}
	.my-prize-header{
		/* width: 50%; */
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.my-prize-header:first-child{
		padding-right: 140rpx;
	}
	.my-prize-header .h-title{
		font-weight: 400;
		font-size: 16px;
		color: #E0EAFF;
		margin-bottom: 8rpx;
	}
	.my-prize-header .h-line{
		width: 42rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 200rpx;
	}
	.my-prize-header .h-line{
		visibility:hidden;
	}
	.headerOn .h-line{
		visibility: initial
	}
	.headerOn .h-title{
		font-size: 36rpx;
		color: #FFFFFF;
	}
	/* end */
	.blind-box-prize{
		width: 100%;
		height: auto;
		background: url('/static/blindbox/my-prize-bg.png') no-repeat;
		background-size: 100% auto;
		padding-bottom: 200rpx;
	}
	.box-prize-li{
		width: 345px;
		box-sizing: border-box;
		margin: 0 auto;
		padding:24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 24rpx;
		position: relative;
	}
	.li-left{
		/* margin-right: 28rpx; */
		width: 104rpx;
		height: 104rpx;
	}
	.li-left-dj{
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		top: 14rpx;
		left: 20rpx;
		z-index: 3;
	}
	.prize-but-dj{
		padding: 4rpx 14rpx;
		background: linear-gradient(90deg, #F0C57D 3.45%, #F8E2B1 100%);
		box-shadow: inset 0px -2rpx 0px #DCB66B;
		border-radius: 20rpx 0px 24rpx;
		color: #824806;
		font-size: 24rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		max-width: 140rpx;
	}
	.li-left-bg{
		border-radius: 12rpx;
	}
	.right-top{
		margin-bottom: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.right-top .title{
		width: 330rpx;
		font-size: 30rpx;
		color: #222222;
	}
	.right-top .probability{
		color: #FF2121;
		font-size: 30rpx;
	}
	.right-botton{
		width: 440rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #666666;
	}
	.but{
		width: 402rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #FF9A3D 3.08%, #FD5D04 100%);
		box-shadow: 0px 8rpx 10rpx rgba(255, 96, 11, 0.2);
		border-radius: 152rpx;
		font-size: 34rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		position: fixed;
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.kf{
		width: 134rpx;
		height: 40rpx;
		background: #FF5800;
		border: 1rpx solid #FF5800;
		border-radius: 200rpx;
		font-size: 12px;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: center;
	}
	.kfBottom{
		margin-top: 28rpx;
		float: right;
	}
</style>
